<template>
    <div class="layout">
        <router-view></router-view>
        <footer>
            <div>
                <router-link active-class="active" to="/home">
                    <van-icon name="wap-home-o" />
                </router-link>
                <router-link exact-active-class="active" to="/indent">
                    <van-icon name="records-o" />
                </router-link>
                <router-link exact-active-class="active" to="/my">
                    <van-icon name="contact-o" />
                </router-link>
            </div>
        </footer>
    </div>
</template>

<style lang="less" scoped>
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 50px;
    padding-top: 10px;
    background-color: rgba(255, 251, 251, 0.8);

    >div {
        width: 100%;
        height: 50px;
        align-items: center;
        display: flex;

        a {
            flex-basis: 33.333333333333%;
            flex-grow: 1;
            text-align: center;
            color: #333;
            -webkit-tap-highlight-color: transparent;

            .van-icon {
                font-size: 20px;
            }
        }

        a.active {
            color: #1EC28A;
        }
    }
}

[class^="icon"] {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-size: cover;
}
</style>